<template>
	<view class="cate">
		<u-tabs :list="list1" v-if="list1.length>0" :scrollable='true' @click="clicktab"></u-tabs>
		<scroll-view scroll-y="true" class="main">
			<view class="list" v-for="(item,index) in list" @click="godetail(item.id)">
				<view class="le">
					<image class="g" :src="$oss(item.image)" mode="aspectFill"></image>
				</view>
			
				<view class="right">
					<view class="rif">
						<view class="tit">
							{{item.name}}
						</view>
						<view class="only" v-if="item.type > 0">
							仅限女性
						</view>
						<view class="sa">
							销量: {{item.sale}}
						</view>
					</view>
					<view class="ricon">
						{{item.intro}}
					</view>
					<view class="ribt">
						<view class="ri_tim">
							<view class="price">
								￥<text class="pr">{{item.price}}</text>
							</view>
							<view class="tima">
								<image class="tia" src="../../static/index/time.png" mode=""></image>
								<view class="tib">
									{{item.costmin}}分钟
								</view>
							</view>
						</view>
			
						<view class="btne" @tap.stop="gotech(item.id)">
							<image class="bt" src="../../static/index/l.png" mode=""></image> 立即预约
						</view>
					</view>
				</view>
			</view>
					<!-- <notice-box></notice-box>	 -->
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				id: '',
				list1:[],
				type: 1,
				page:1,
				finish:false
			};
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			this.type = option.type
			uni.setNavigationBarTitle({
				title:option.name
			})
			this.getindex()
			this.skillclassify()
		},
		methods: {
			skillclassify() {
				this.$api.post('/allClassify', {pid:this.id}).then(res => {
					console.log(res);
					this.list1 = res.data
					if(this.list1.length>0){
						let obj={
							name:'全部',
							id:this.id
						}
						this.list1.unshift(obj)
					}
				})
			},
			clicktab(e){
				this.id = e.id
				this.list = []
				this.finish = false
				this.page=1
				this.getindex()
			},
			// 跳转选择讲师
			gotech(ids) {
				uni.$u.route({
					url: 'pages/index/choose/choose',
					params: {
						cate_id: ids
					}
				})
			},
			// 跳转详情页面
			godetail(id) {
				uni.$u.route({
					url: '/pages_index/details/details',
					params: {
						id: id
					}
				})
			},
			// 分页
			lower() {
				this.page++
				this.getindex()
			},
			// 请求数据
			getindex(index) {
				if (this.finish) {
					return
				}
				let url, data;
				if (this.type == 1) {
					url = '/classifycate'
					data =  {
						page: this.page,
						classify_id: this.id
					}
				} else {
					url = '/hotcate'
					data =  {
						page: this.page
					}
				}
				this.$api.post(url, data).then(res => {
					if (res.code == 1) {


						if(this.type == 1){
							this.list = this.list.concat(res.data)
							if (res.data.length === 0) {
								this.finish = true
							}
						} else {
							this.list = this.list.concat(res.data)
							if (res.data.length === 0) {
								this.finish = true
							}
						}
					}
				}).catch((res) => {


				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.cate {
		height: 100vh;

		.main {
			overflow: hidden;
			height: 100%;

			.list {
				border-radius: 40rpx;
				background-color: #fff;
				margin: 20rpx 15rpx;
				padding: 15rpx;
				display: flex;
				flex-direction: row;
			
				.le {
					margin-right: 25rpx;
			
					.g {
						border-radius: 15rpx;
						width: 215rpx;
						height: 160rpx;
					}
			
				}
			
				.right {
					flex: 1;
					display: flex;
					flex-direction: column;
			
					.rif {
						display: flex;
						flex-direction: row;
			
						.tit {
							font-size: 32rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: bold;
							color: #333333;
						}
			
						.only {
							background: #ebfff3;
							color: #19B564;
							font-size: 22rpx;
							padding: 4rpx 8rpx;
							border-radius: 6rpx;
							margin-left: 20rpx;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;
						}
			
						.sa {
							flex: 1;
							text-align: right;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
			
					.ricon {
						padding: 20rpx 0rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
			
					.ribt {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
			
						.ri_tim {
							display: flex;
							flex-direction: row;
			
			
							.price {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: bold;
								color: #FF0F00;
								line-height: 40rpx;
			
								.pr {
									font-size: 40rpx;
								}
			
							}
			
			
							.tima {
								display: flex;
								align-items: center;
								flex-direction: row;
			
								.tia {
									margin: 0rpx 10rpx;
									width: 23rpx;
									height: 23rpx;
								}
			
								.tib {
									margin-right: 10rpx;
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #BEBEBE;
								}
			
							}
			
			
						}
			
			
			
						.btne {
							width: 165rpx;
							height: 64rpx;
							background: $uni-bg-color;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
			
							.bt {
								width: 23rpx;
								height: 25rpx;
								margin-right: 5rpx;
							}
						}
					}
			
				}
			}
			
		}
	}
</style>
